import React, { Component } from 'react'
/* 1. 引入 connect 函数 */
import { connect } from 'react-redux'
import { addAction, subAction } from './actionCreator'
/**
 * connect(注入属性的函数，注入方法函数)(组件)
 * connect((state)=>{
 *  return {
 *  num: state.num
 * }
 * },(dispatch)=>{
 *    return {
 *      add:function(){},
 *      sub:function(){}
 *   }
 * })(App)
 *
 *
 */
class App extends Component {
	// 5. 定义一个加的方法
	add = (params) => {
		this.props.add()
	}
	// 6. 定义一个减的方法
	sub = (params) => {
		this.props.sub()
	}
	render() {
		return (
			<div>
				{/* 7.注册加的方法 */}
				<button onClick={this.add}>+</button>
				{/* 3. 使用属性中的num */}
				<span>{this.props.num}</span>
				{/* 8. 注册减的方法 */}
				<button onClick={this.props.sub}>-</button>
			</div>
		)
	}
}

/* 2. 通过connect 函数注入属性 */
export default connect(
	(state) => {
		return {
			num: state.num,
		}
	},
	// 4. 注入加减的方法
	// 4.1 dispatch 函数用来派发动作用的
	(dispatch) => {
		return {
			add: function () {
				// debugger
				// 定义一个加的动作

				dispatch(addAction())
			},
			sub: function () {
				// debugger
				// 定义一个减的动作
				dispatch(subAction())
			},
		}
	}
)(App)
